<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        v-if:用于频繁切换
        v-show:用于不频繁切换 
    -->
</head>

<body>
    <!-- <div id="app">
        <button @click="conunt--">-</button>
        <span>{{conunt}}</span>
        <button @click="conunt++">+</button>

    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                conunt: 0
            }
        })
    </script> -->

    <div id="app">
        <button @click="fn1">-</button>
        <span>{{count}}</span>
        <button @click="fn2">+</button>

    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                count: 96
            },
            methods: {
                fn1() {
                    this.count--;
                },
                fn2() {
                    this.count++;
                }
            }
        })
    </script>


</body>

</html>